<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    Vue Index Page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>

        <h3>This is vue index page.</h3>
        <p>===========================================</p>
        <div id="vueTest">
            <form action="javascript:void(0);">
                <h3>{{title}}</h3>
                <h3>单向绑定</h3>
                <p>UserName: <input type="text" v-bind:value="user.userName"/></p>
                <p>Password: <input type="text" :value="user.password" /></p>
                <p>===========================================</p>
                <h3>双向绑定</h3>
                <input type="hidden" v-model:value="user.id"/>
                <p>UserName: <input type="text" v-model:value="user.userName"/></p>
                <p>Password: <input type="text" v-model:value="user.password" /></p>
                <p>Email: <input type="text" v-model:value="user.email" /></p>
                <p>UserImage: <input type="text" v-model:value="user.userImage" /></p>
                <p>===========================================</p>
                <h3>事件绑定</h3>
                <input type="button" @click="test1()" value="test_1">
                <p>===========================================</p>
                <h3>循环</h3>
                <span v-for="(role, index) in roles">
					<input type="checkbox" :value="role.id" /> {{role.name}}
				</span>
                <table>
                    <tr><td>ID</td><td>Name</td></tr>
                    <tr v-for="(role, index) in roles">
                        <td>{{role.id}}</td><td>{{role.name}}</td>
                    </tr>
                </table>
                <p>===========================================</p>
                <h3>自定义组件</h3>
                <p>简单组件：<button-demo></button-demo></p>
                <p>复杂组件：<button-count></button-count></p>
            </form>
        </div>
    </div>
</div>
<!-- /page content -->

<script type="text/javascript">
    /* $(function() {
        initUser();
    }); */

    Vue.component("button-demo", {
        template: "<button>11111</button>",
    });

    Vue.component("button-count", {
        data: function() {
            return {count: 0}
        },
        methods: {
            countFunction: function () {
                this.count ++;
            }
        },
        template: "<button @click='countFunction()'>{{count}}</button>",
    });

    var vueTest = new Vue({
        el: "#vueTest",
        data: {
            title: "Vue test",
            user: {
                id: "1",
                userName:"yhq",
                password:"111111",
                email:"yhq@qq.com",
                userImage:"/upload/18.png",
            },
            roles: [
                {id: 1, name: "admin"},
                {id: 2, name: "manager"},
                {id: 3, name: "staff"},
            ],
        },
        methods:{
            test1: function() {
                console.log(this.user);

            },
            initUser: function() {
                var userId = $("#userId").val();
                var self = this;
                $.ajax({
                    url : "/api/user/" + userId,
                    type : "get",
                    success : function (rs) {
                        self.user = rs;
                    },
                    error : function (data) {
                        layer.msg(data.responseText, {icon: 0});
                    }
                });
            }
        },
        created: function() {
            window.initUser = this.initUser;
        },
        mounted: function() {
            this.initUser();
        }
    });

</script>
